<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <link href="../bootstrap/css/bootstrap.css" rel="stylesheet">
    <script src="../bootstrap/js/jquery-3.1.0.js"></script>
    <script src="../bootstrap/js/bootstrap.js"></script>
    <style>
        html,body{
            font-size: 10px !important;
        }
        /*多行省略*/
        .demo{
            display: -webkit-box;
            font-size: 14px;
            line-height: 18px;
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }

        /*角标的实现*/
        .rongqi {
            font-size: 16px;
            line-height: 20px;
            height: 20px;
            overflow: hidden;
            position: absolute;/*让容器自动收缩到内容*/
            top: 0;
            left: 0;
        }
        .wenan{
            float: left;
            position: relative;
            z-index: 3;
            padding-left: 4px;
            color: #fff;
            font-size: 10px;
            background-color: #c59c53;
        }
        .script {
            width: 0;
            height: 0;
            border-right: 20px solid transparent;
            border-top: 30px solid #c59c53;
            float: right;           /*应用float后边框也会包含在父元素边框内*/
            margin: -2px;
        }
        /*图文标题*/
        p.tuwen{
            padding-left:40px;
        }
        p.tuwen::before{
            content: '';
            display: inline-block;
            background: url(images/logo.png) center center no-repeat;
            background-size: contain;
            width: 20px;
            height: 20px;
            vertical-align: middle;
            margin-right: 5px;
        }

        /*左右宽度自适应*/
        .ent-li{
            display: flex;
            width: 400px;
            line-height: 30px;
        }
        .ent-li .left{
            flex: 1;
            font-size: 16px;
            color: #333;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }
        .ent-li .right{
            padding-left: 10px;
            font-size: 12px;
            color: #999;
        }

        /*inline-block*/
        .father{
            width: 400px;
            font-size: 0;
        }
        .cell{
            display: inline-block;
            width: 100px;
            height: 100px;
            line-height: 100px;
            border-radius: 50%;
            background-color: #ccc;
            text-align: center;
            font-size: 12px;
        }



        /*旗帜*/
        .flag{
            width: 0;
            height: 0;
            border: 2rem solid #ff6600;
            border-top-width: 4rem;
            border-bottom-color: transparent;
        }

        /*实现双实心箭头*/
        .rds-arrow,
        .rds-arrow:after {
            display: inline-block;
            position: relative;
            width: 0;
            height: 0;
            border-top: 1rem solid transparent;
            border-left: 2rem solid #ff6600;
            border-bottom: 1rem solid transparent;
            border-right: 2rem solid transparent;
        }
        .rds-arrow:after{
            content: "";
            position: absolute;
            top: -1rem;
        }

        /*实现气泡*/
        .bubble{
            position: relative;

            width: 10rem;
            height: 3rem;
            line-height: 3rem;


            background-color: #33AAEE;
            color: #fff;

            text-align: center;
        }
        .bubble:before{
            content: "";
            position: absolute;
            right: 100%;
            top:0.5rem;
            width: 0;
            height: 0;
            border-top: 1rem solid transparent;
            border-bottom: 1rem solid transparent;
            border-left: 1rem solid transparent;
            border-right: 1rem solid #3af;
        }

        /*实现丝带*/
        .ribbon{
            position: relative;

            font-size: 1.6rem;
            font-weight: 800;
            padding: 0.7rem;
            width: 10rem;

            background-color: #ff0066;
            text-align: center;
            color: #fff;

            margin-bottom: 40px;
        }
        .ribbon:before,.ribbon:after{
            content: "";

            display: block;
            width: 0;
            height: 0;

            border: 1.5rem solid #ff0066;

            position: absolute;
            bottom: -0.6rem;
        }
        .ribbon:before{
            left: -2.4rem;

            border-left-color: transparent;
            box-shadow: 0 1px 0 0 rgba(176, 102, 166, 0.8);

            z-index: -1;
        }
        .ribbon:after{
            right: -2.4rem;

            border-right-color: transparent;
            box-shadow: 0 1px 0 0 rgba(176, 102, 166, 0.8);

            z-index: -1;
        }

        .ribbon span:before,.ribbon span:after{
            content: "";

            display: block;
            width: 0;
            height: 0;

            border-color: #bf004c transparent transparent transparent;
            border-style: solid;

            position: absolute;
            bottom: -0.6rem;
        }
        .ribbon span:before{
            left: 0rem;

            border-width: 0.6rem 0 0 0.6rem;
        }
        .ribbon span:after{
            right: 0rem;
            bottom: -0.6rem;

            border-width: 0.6rem 0.6rem 0 0;
        }


        .colored-border-empty-retangle {
            margin: 50px auto;
            width: 0;
            height: 0;
            border-top: 40px solid coral;
            border-right: 40px solid lightblue;
            border-bottom: 40px solid lightgreen;
            border-left: 40px solid mediumpurple;
        }

        a:link {
            color: blue;
        }
        a:visited {
            color: purple;
        }
        a:hover {
            color: red;
        }
        a:active {
            color: orange;
        }

        .mulit_line{line-height:150px; border:1px dashed #cccccc; padding-left:5px;}
        .mulit_line span{display:-moz-inline-stack; display:inline-block; line-height:1.4em; vertical-align:middle;}
        .mulit_line i{width:0; display:-moz-inline-stack; display:inline-block; vertical-align:middle; font-size:0;}

        .out{display:inline-block; background:#a0b3d6; margin-top:20px;}
        .in1{display:block; height:20px;}
        .in2{display:block; line-height:20px;}

        .box{background:black; color:white; padding-left:20px;}
        .dot{display:inline-block; width:240px; height:240px; background:red;}

        .justify-fix
        {
            display: inline-block;
            width: 128px;
            outline: 1px solid red;
        }
    </style>
    <script type="text/javascript">
        $(function(){
        });
    </script>
</head>
<body>
<div class="container">
    <a href="#" style="font-size: 3rem">Link</a>
    <h3>多行省略</h3>
    <div class="demo" style="width: 100px">
        这样设置还要考虑一个极端的情况，就是标题不足两行。具体要看PM的需求，一是空出第二行的距离，二是让标题下边的元素顶上去。如果是第一种需求，有2种解决的方案。
    </div>
    <hr>
    <h3>角标的实现</h3>
    <div style="position: relative">
        <p class="rongqi">
            <span class="wenan">跟团游</span><span class="script"></span>
        </p>
    </div>
    <hr>
    <h3>图文标题</h3>
    <p class="tuwen"><span>一段描述文字</span><span>一段描述文字</span></p>
    <hr>

    <h3>左右宽度自适应</h3>
    <div class="ent-li">
        <img src="images/logo.png" style="width: 30px;height: 30px">
        <div class="left">主题门票aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
        <div class="right">100</div>
    </div>

    <hr>
    <h3>inline-block</h3>
    <div class="father">
        <div class="cell">cell1</div>
        <div class="cell">cell2</div>
        <div class="cell">cell3</div>
        <div class="cell">cell4</div>
        <div class="cell">cell5</div>
        <div class="cell">cell6</div>
        <div class="cell">cell7</div>
    </div>

    <hr>
    <h3>Flag</h3>
    <div class="flag"></div>

    <hr>
    <h3>实现双实心箭头</h3>
    <div class="rds-arrow"></div>

    <hr>
    <h3>实现气泡</h3>
    <div class="bubble">
        立即查看
    </div>

    <hr>
    <h3>实现丝带</h3>
    <div class="ribbon"><span>金卡会员</span></div>

    <div class="colored-border-empty-retangle"></div>

    <h3>多行垂直居中</h3>
    <p class="mulit_line">
        <span style="font-size:12px;">
            这里是高度为150像素的标签内的多行文字，文字大小为12像素。<br />
            <span style="font-size: 24px">这里是第二行，用来测试多行的显示效果。</span>
        </span>
        <i>&nbsp;</i>
    </p>

    <h3>使用行高代替高度避免haslayout</h3>
    <span class="out">
        <span class="in1">height:20px;</span>
    </span>
    <span class="out">
        <span class="in2">line-height:20px;</span>
    </span>

    <h3>行高</h3>
    <p style="line-height: 1.5">首先要知道行高的几种表示方法：px/em，或normal，或百分值，或数值，或inherit继承。在显示文章的<span style="font-size: 20px">box</span>里，px的表示方法首先是要被淘汰的。因为文章里面的文字是有大有小的，使用px定值，由于继承性，无法实现根据文字大小自动调整间距，会出现大号文字重叠的现象。normal也是不行的，一般文章显示最好是<span style="font-size: 40px">650</span>像素的宽度，1.5倍的行距较好。一般浏览器的normal值在1~1.2之间，使用normal必然文字间距过小，阅读吃力。百分值也有继承性，但是有个很搓的办法可以实现文字间距自动适应于文字的大小，那就是使用“*”通配符，例如：.article_box *{line-height:150%;}就不会出现文字重叠的情况了。</p>

    <h3>verticle-align</h3>
    <span class="box">
        <span class="dot"></span>
        我是一段卡哇伊的文字。
    </span>

    <h3></h3>
    <div style="line-height:200px;background-color:  #34538b;">
        <span style="font-size:60px; background-color:  #a0b3d6; vertical-align:top;">大大的文字X</span>x后面是静止的文字。
    </div>
    <br>
    <div style="text-align: justify; width: 400px;background-color: #2aabd2">
        <img src="images/mm1.jpg" width="128">
        <img src="images/mm1.jpg" width="128">
        <img src="images/mm1.jpg" width="128">
        <img src="images/mm1.jpg" width="128">
        <i class="justify-fix"></i>
        <i class="justify-fix"></i>
        <i class="justify-fix"></i>
    </div>
    <br><br><br><br>
</div>
</body>
</html>